<!-- 修改姓名 -->
<script setup>
import { reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { toast } from '@/uni_modules/uview-plus';
import { editUserInfoApi } from '@/api/user.js';
// 数据
const data = reactive({
  value: ''
})

// 初始化
onLoad(options => {
  data.value = options.name
})
// 提交数据
const submit = () => {
  if (data.value == '') return toast('请输入姓名')
  editUserInfoApi({
    nickname: data.value
  }).then(res => {
    toast('修改用户名成功!')
    uni.navigateBack()
  })
}
</script>

<template>
  <view class="editname-page">
    <view class="content-box">
      <up-input placeholder="请输入姓名" border="surround" v-model="data.value"></up-input>
      <up-button text="确认" @click="submit"></up-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.editname-page {
  margin: 0 30rpx;
  padding-top: 84rpx;

  &::v-deep .content-box {
    & .u-input {
      & input {
        text-align: center !important;
      }
    }

    & .u-button {
      margin-top: 40rpx;
      height: 100rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #FFFFFF;
      background: #FFA618;
      border-radius: 10rpx;
    }
  }
}
</style>